<template>
  <view class="page">
    <h1>欢迎登录</h1>
    <button @click="login">使用微信账号一键登录</button>
    <view class="tips">
      登录代表已阅读并同意
      <span class="color-text" @click="showService">《服务协议》</span>
      及
      <span class="color-text" @click="showPrivacy">《隐私政策》</span>
    </view>
    <!--登录弹窗-->
    <view class="modal-mask" catchtouchmove="preventTouchMove" v-if="showModal"></view>
    <view class="modal-dialog" v-if="showModal">
      <view class="modal-content">
        <text>绑定手机号</text>
        <view >请先绑定手机号再进行此操作</view>  
        <button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          <image src='/static/icon/wx.png' class='iconWx'></image>微信用户一键绑定
        </button>
      </view>
    </view>
    <modal-component
      v-if="showModalComponent"
      :title="title"
      @confirm="showModalComponent = false"
    >
      <rich-text :nodes="richtextContent"></rich-text>
    </modal-component>
  </view>
</template>
<script>
import ModalComponent from '@/components/Modal/index'
import {
  getToken
} from '@/api/home'
import { getAbout } from '@/api/mine'
export default {
  components: {
    ModalComponent
  },
  data() {
    return {
      showModal: false,
      tokenParams:{},//token参数
      params: {
        encryptedData:"",
        iv:"",
        code:""
      },
      title: '',
      richtextContent: '',
      showModalComponent: false,
      info: {}
    }
  },
  onLoad() {
    this.getAbout()
  },
  methods: {
    // 显示一键获取手机号弹窗
	showDialogBtn () {
		this.showModal = true
	},
	// 隐藏一键获取手机号弹窗
	hideModal () {
		this.showModal = false
	},
	
    //微信授权
    grantAuth() {
      uni.showModal({
        title: "提示",
        content: "授权微信登录后才能正常使用小程序功能",
        success: res => {
          if (res.confirm) {
            this.login()
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      })
    },
    //登录，获取code
    login() {
      uni.getUserProfile({
        desc: '必须授权才可以继续使用',
        success: res => {
          this.tokenParams = res
          //缓存用户信息
          uni.setStorageSync("userInfo", res.userInfo)
          //登录，获取code
          uni.login({
            success: res => {
              this.tokenParams.code = res.code
              //获取token
              this.getToken()
            },
            fail: res => {
              console.log("登录失败:", res)
            }
          })
        },
        fail(res) {
          console.log("授权失败")
        }
      })
    },
    //获取token
    getToken() {
      getToken(this.tokenParams).then(res => {
        uni.setStorageSync("token", res.data.token)
		wx.switchTab({url: '/pages/index/index'})
		//this.showDialogBtn() //显示绑定手机号遮罩层
      }).catch(err => {
        console.log(err);
      })
    },
	
	//获取用户手机号（微信api）
	getPhoneNumber (e) {
	    //授权后的处理
	    if (e.detail.errMsg == "getPhoneNumber:ok") {
	        //用户信息
			this.params = {
				encryptedData:encodeURI(e.detail.encryptedData),
				iv: encodeURI(e.detail.iv),
			}
	        console.log('参数', this.params)
			uni.login({
				success:res=>{
					this.params.code = encodeURI(res.code),
					this.getPhone(this.params)
				}
			})
	    }
    },
    //后台接口
    getPhone(params){
      this.http.get({
        url:'/index.php/Wxapp/AutoWx/getPhone',
        data:params
      }).then(resp=>{
        console.log("手机号码：",resp)
        wx.switchTab({url: '/pages/index/index'})
      }).catch(err=>{
        console.log("请求服务列表失败：",err)
      })
    },
    showService() {
      const { uscontent } = this.info
      this.title = '服务协议'
      this.richtextContent = uscontent
      this.showModalComponent = true
    },
    showPrivacy() {
      const { hidcount } = this.info
      this.title = '隐私政策'
      this.richtextContent = hidcount
      this.showModalComponent = true
    },
    getAbout() {
      getAbout().then(res => {
        const { data } = res
        const { hidcount, uscontent } = data.list
        const hidcountVal = this.formatRichText(hidcount)
        const uscontentVal = this.formatRichText(uscontent)
        this.info = {
          hidcount: hidcountVal,
          uscontent: uscontentVal
        }
      })
    },
    formatRichText(richtext) {
      const reg1 = new RegExp("&lt;", "gi");
      const reg2 = new RegExp("&gt;", "gi");
      const reg3 = new RegExp("&amp;ldquo;", "gi");
      const reg4 = new RegExp("&amp;rdquo;", "gi");
      const reg5 = new RegExp("&amp;&nbsp;", "gi");
      const result = richtext
        .replace(reg1, `<`)
        .replace(reg2, `>`)
        .replace(reg3, '“')
        .replace(reg4, '”')
        .replace(reg5, ` `)
      return result
    }
  }
}
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 20rpx;
    h1 {
      margin-bottom: 100rpx;
      font-size: 36rpx;
      color: #222;
    }
  }
  button {
    width: 60%;
    height: 80rpx;
	  line-height: 80rpx;
    margin-bottom: 100rpx;
    color: #fff;
    font-weight: 600;
    background: #E76625;
  }
  .tips {
    width: 100%;
    text-align: center;
    color: #999;
    .color-text {
      color: #E76625;
    }
  }
  .modal-mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ccc;
    filter: Alpha(Opacity=60);
    opacity: 0.6;
    z-index: 999;
  }
  .modal-dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    .modal-content {
      width: 80%;
      height: 450rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 25vh;
      background: #fff;
      border-radius: 10rpx;
      text {
        margin: 80rpx 0 15rpx 0;
        font-size: 36rpx;
        color: #222;
      }
      button {
        width: 80%;
        height: 80rpx;
        margin-top: 30rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 40rpx;
        background: #18BC37;
        image {
          width: 60rpx;
          height: 60rpx;
          margin-right: 15rpx;
          border-radius: 50%;
        }
      }
    }
  }
</style>